import AllBrands from '@/components/car/all-brands'
import Breadcrumb from '@/components/common/breadcrumb'
import Block from '@/components/layout/block'
import Floor from '@/components/layout/floor'
import Wrapper from '@/components/layout/wrapper'
import { getHomeUrl } from '@/utils/build-url'
import { getModelsUrl } from '@/utils/build-url/models'
import React from 'react'
import { getAllBrandsList, getCarCategoryList, getModels } from './action'
import Heading from '@/components/common/heading'
import CarCategory from '@/components/car/car-category'
import CarSearchForm from '@/components/car/search-form'
import ModelCard from '@/components/car/model-card'
import CardList from '@/components/layout/card-list'
import Pagination from '@/components/common/pagination'
import { formatWithThousandsSeparator } from '@/utils/format/number'
import StickyBox from '@/components/common/sticky-box'


const page = async () => {
  const list = await getAllBrandsList()
  const categoryList = await getCarCategoryList()
  const models = await getModels()
  return (
    <>
      {/* 面包屑 */}
      <Floor className='h-[180px] bg-[url("https://picsum.photos/1920/200")]'>
        <Wrapper>
          <Block className='h-[180px] flex flex-col justify-between'>
            <Breadcrumb className='text-white' list={[
              { name: '首页', href: getHomeUrl({ language: 'zh' }) },
              { name: '车型库', href: getModelsUrl({ language: 'zh' }) }
            ]} />
            <div className='flex-1 flex flex-col items-left justify-center w-full gap-y-content-gap-y md:gap-y-content-gap-y-md'>
              <h1 className='h2 font-bold text-white!'>汽车车型库</h1>
              <p className='text-white'>搜索车型、品牌、价格、配置关键词，精准找到心仪座驾</p>
            </div>
          </Block>
        </Wrapper>
      </Floor>

      {/* 筛选车型库 列表 */}
      <StickyBox>
        <Floor className='bg-white'>
          <Wrapper>
            <Block>
              <CarSearchForm />
            </Block>
          </Wrapper>
        </Floor>
      </StickyBox>

      <Floor>
        <Wrapper>
          <Block>
            <Heading>共<span className='text-primary'> {formatWithThousandsSeparator(models.total)} </span>款车系</Heading>
            <CardList>
              {models.list.map((item) => (
                <ModelCard key={item.slug} obj={item} />
              ))}
            </CardList>
            <Pagination total={models.total} size={12} />
          </Block>
        </Wrapper>
      </Floor>

      <Floor>
        <Wrapper>
          <Block>
            <Heading>其他人还看</Heading>
            <CardList>
              {models.list.slice(0, 4).map((item) => (
                <ModelCard key={item.slug} obj={item} />
              ))}
            </CardList>
          </Block>
        </Wrapper>
      </Floor>

      {/* <Floor>
        <Wrapper>
          <Block>
            <Heading>所有品牌</Heading>
            <AllBrands list={list} />
          </Block>
        </Wrapper>
      </Floor> */}

      {/* <Floor className='bg-white'>
        <Wrapper>
          <Block>
            <Heading>按车型分类</Heading>
            <CarCategory list={categoryList} />
          </Block>
        </Wrapper>
      </Floor> */}

      {/* <Floor>
        <Wrapper>
          <Block>
            <Heading>新车上市</Heading>
            2222
          </Block>
        </Wrapper>
      </Floor> */}
    </>
  )
}

export default page